<template>
  <div>
    <a-descriptions
      layout="vertical"
      bordered
      size="small"
      v-if="mcpInfo !== undefined"
    >
      <a-descriptions-item label="名称" :span="3">
        {{ mcpInfo?.server_name }}
      </a-descriptions-item>
      <a-descriptions-item label="描述" :span="3">
        {{ mcpInfo?.description ? mcpInfo?.description : '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="类型" :span="3">
        <a-tag v-if="mcpType === 'stdio'" :bordered="false" color="processing"
          >YES 标准输入/输出(stdio)</a-tag
        >
        <a-tag v-if="mcpType === 'sse'" :bordered="false" color="processing"
          >服务器发送事件(sse)</a-tag
        >
        <a-tag
          v-if="mcpType === 'streamable_http'"
          :bordered="false"
          color="processing"
          >可流式传输的HTTP(streamableHttp)</a-tag
        >
      </a-descriptions-item>
      <a-descriptions-item v-if="mcpType === 'stdio'" label="命令" :span="3">
        -
      </a-descriptions-item>
      <!-- stdio且命令为npx时展示包管理源 -->
      <a-descriptions-item :span="3" v-if="mcpType === 'stdio'">
        <template v-slot:label>
          包管理源
          <a-tooltip placement="top">
            <template #title>
              <span>选择用于安装包的源,以解决默认源的网络问题</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        默认<br />
        淘宝 NPM Mirror <br />
        自定义 https://<br />
      </a-descriptions-item>

      <a-descriptions-item v-if="mcpType === 'stdio'" :span="3">
        <template v-slot:label>
          参数
          <a-tooltip placement="top">
            <template #title>
              <span>每个参数占一行</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        /c <br />
        npx<br />
        -y<br />
      </a-descriptions-item>
      <a-descriptions-item v-if="mcpType === 'stdio'" :span="3">
        <template v-slot:label>
          环境变量
          <a-tooltip placement="top">
            <template #title>
              <span>格式:KEY=value,每行一个</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        key1=value1<br />
        key2=value2<br />
      </a-descriptions-item>

      <a-descriptions-item v-if="mcpType !== 'stdio'" :span="3">
        <template v-slot:label>
          URL
          <a-tooltip placement="top">
            <template #title>
              <span>远程URL地址</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        {{ mcpInfo?.config[mcpInfo?.server_name]?.url }}
      </a-descriptions-item>
      <a-descriptions-item v-if="mcpType !== 'stdio'" :span="3">
        <template v-slot:label>
          请求头
          <a-tooltip placement="top">
            <template #title>
              <span>HTTP 请求的自定义请求头</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        -
      </a-descriptions-item>
      <a-descriptions-item :span="3">
        <template v-slot:label>
          超时
          <a-tooltip placement="top">
            <template #title>
              <span>对该服务器请求的超时时间(秒),默认为60秒</span>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </template>
        60</a-descriptions-item
      >
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
  import { InfoCircleOutlined } from '@ant-design/icons-vue';
  import { ref, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { McpType } from '@/types/tools';
  const props = defineProps<{
    mcpInfo: McpType;
  }>();
  const mcpType = computed(() => {
    return props.mcpInfo?.config[props.mcpInfo?.server_name]?.transport;
  });
  const route = useRoute();
  const router = useRouter();
  const checked = ref<boolean>(false);
</script>

<style scoped lang="scss"></style>
